<template>
<div>
  <search-bar-view
    @hidden-view ='hideMainView'
    @click-search='search' ref="search-bar"></search-bar-view>
  <template v-if="isShow">
    <guess-like
      :title='tit'
      subTitle=""
      @choose-type="choCouType"
      :couponType="couponType"></guess-like>
    <filter-search-view @click-screening='clickScreening'></filter-search-view>
    <div v-infinite-scroll="clickMoreList" infinite-scroll-disabled="loading" infinite-scroll-distance="100"  @touchstart="clearGoTo">
      <coupon-card :coupon="coupon" v-for="(coupon,index) in couponList" :key='index' view="coupon"></coupon-card>
      <!--<mecth-card :merch-info="merch" v-for="(merch,index) in couponList" :key='index' view="merch"></mecth-card>-->
    </div>
    <go-top v-show="goTopState" ref="goTopId"></go-top>
    <no-data  v-if="couponList.length==0"></no-data>
    <div class="lastInfoMore" v-if="!moreInfo" v-show="couponList.length>2">没有更多</div>
  </template>
</div>
</template>
<script>
import {mapState} from 'vuex'
import SearchBarView from 'src/componentes/global/search_bar.vue'
import * as types from '../../vuex/types.js'
import landingPage from 'src/componentes/global/landingPage.vue'
import {
  Storage
} from 'src/utils/storage.js'
export default {
  name: 'coupon-list',
  components: {SearchBarView,landingPage},
  data: () => ({
    isShow: true,
    loading: true,
    tit:Storage.get('menuArrMess',true).tit,
    isShowDistance: true, // 显示距离
    noMoreCoupon: true,
    currFilter: { // 当前被选中条件
      couponType: 'all', // 电子券类型
      mchtFacil: '', // 商户设施
      mchtType: '', // 餐饮
      near: '' // 距离
    },
    couponType: [
      {key: 'all', isChecked: true, value: '全部'},
      {key: 'cash',isChecked: false,value: '代金券'},
      {key: 'rebate',isChecked: false,value: '折扣券'},
      {key: 'voucher',isChecked: false,value: '抵用券'}
    ],
    goTopState:false,
    moreInfo:true
  }),
  computed: {
    ...mapState({
      couponTit: state => state.coupon.couponTit, //左上角标题
      couponInfoPageLimit: state => state.coupon.couponInfoPageLimit, //分页限制
      couponInfo: state => state.coupon.couponInfo, //电子券数组
      position: state => state.coupon.position, //用户地理位置
    }),
    couponList() {
      this.couponInfo.forEach(item => {
        item.type = item.couponType
        item.name = item.couponName
        item.comNum = item.couponComNum
        item.comScore = item.couponComScore
        item.seqNo = item.id
      })
      return this.couponInfo
    }
  },
  created() {
    // 监视滚动
    window.addEventListener('scroll', this.handleScroll);
    this.$store.commit(types.GET_PAGE_NUM, 1)
    this.$store.commit(types.GET_COUPON_LIST);
    this.$store.commit(types.GET_SCORLL_STATUS,true);
    this.moreList()
  },
  methods: {
    clearGoTo() {
      this.$refs.goTopId.clear()
    },
    //点击搜索框判断搜索历史和搜索结果的显示
    hideMainView(value) {
      this.isShow = value
    },
    search() {
      this.$router.push({
        name: 'couponSearch'
      })
    },
    // 加载更多（电子券）
    clickMoreList() {
    	this.loading = true;
      this.noMoreCoupon = true;	 
      this.moreList()
    },
    // 选择电子券类型
    choCouType(index, type) {
      this.couponType.forEach(item => {
        item.isChecked = false
      })
      this.couponType[index].isChecked = true
      this.currFilter.couponType = type
      this.$store.commit(types.GET_COUPON_LIST)
      this.$store.commit(types.GET_PAGE_NUM, 1)
      this.moreList()
    },
    // 获取电子券
    moreList() {
      if (!this.noMoreCoupon) { //防止重复点击
        return
      }
      this.noMoreCoupon = false;
      let data = this.currFilter
      let me = this
      if(this.currFilter.mchtType==''||this.currFilter.mchtType=='全部'){
        let param = {
        method: 'post',
        data: {
          mchtName:'*',
        	near: data.near,
          facilities:data.mchtFacil,
          mchtType: Storage.get('menuArrMess',true).menuArrId,
          flag:Storage.get('menuArrMess',true).menuArrId=='9008'?1:0,
          couponType: data.couponType == 'all'? '*' : data.couponType,
          position: this.position || '' // 121.6248,31.326
        }
      }
      this.$store.dispatch('queryEightMcht', param).then(rep => {
        if (rep.content.couponList.length == this.couponInfoPageLimit) { //如果列表数据够10条，开启下拉加载
          me.moreInfo=true;
          me.loading = false;
        }else{
          me.moreInfo=false;
        }
        setTimeout(() => {
          this.noMoreCoupon = true
        }, 300);
      }).catch((rep) => {
        setTimeout(() => {
          this.noMoreCoupon = true
        }, 300);
      });
      }else{
      	    let param = {
        method: 'post',
        data: {
          near: data.near,
          facilities:data.mchtFacil,
          mchtType: this.couponTit === '全部' ? '*' : this.couponTit,
          couponType: data.couponType == 'all'? '*' : data.couponType,
          couponName: '*',
          position: this.position || '' // 121.6248,31.326
        }
      }
        this.$store.dispatch('getCouponList', param).then(rep => {
        if (rep.content.couponList.length == this.couponInfoPageLimit) { //如果列表数据够10条，开启下拉加载
          me.moreInfo=true;
          me.loading = false;
        }else{
          me.moreInfo=false;
        }
        setTimeout(() => {
          this.noMoreCoupon = true
        }, 300);
      }).catch((rep) => {
        setTimeout(() => {
          this.noMoreCoupon = true
        }, 300);
      });
      }
    },
    // 筛选
    clickScreening({near, mchtType, mchtFacil}) {
      Object.assign(this.currFilter, {near, mchtType, mchtFacil})
      this.$store.commit(types.GET_COUPON_LIST);
      this.$store.commit(types.GET_PAGE_NUM, 1)
      this.noMoreCoupon = true;
      this.moreList()
    },
    //监听滚动事件
    handleScroll() {
      // let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      // this.isFixed = scrollTop >= 50 * 2;
        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
        var scrollHeight=document.documentElement.clientHeight||document.body.scrollTop;
        if (scrollTop>=scrollHeight+50) {
            this.goTopState = true
        } else {
            this.goTopState = false
        }
        //回到顶部过程中用户滚动滚动条，停止定时器
        if (scrollTop <= 0) {
            if (this.$refs.goTopId) {
                this.$refs.goTopId.clear();
            }
        };

    },
  },
  beforeRouteLeave(to, from, next){
    // 避免返回时未清除定时器
    if (this.$refs.goTopId) {
      this.$refs.goTopId.clear();
    }
    window.removeEventListener('scroll', this.handleScroll);
    next()
  }
}
</script>
<style scoped>
.coupon_tit {
  background-color: #fff;
}
.noList span {
    margin: 2rem auto;
    display: block;
    font-size: 1rem;
    color: #333;
    text-align: center;
}
</style>
